<template>
  <div>
    <el-card class="box-card">
      <el-row>
            <el-col :md="24" :lg="20">
              <el-button type="primary" size="mini" icon='el-icon-more'  :disabled="currentRow.length!=1" @click="detail">查看详情</el-button>
            </el-col>
          </el-row>
      <el-table :data="tableData" border highlight-current-row class="tableMarginTop" @selection-change="handleCurrentChange">
            <el-table-column type="selection" width="40px"></el-table-column>
            <el-table-column prop='TASKID' label='任务号' align="center"></el-table-column>
            <el-table-column prop='OPERAWORKDATE' label='抽样日期' width="100" align="center"></el-table-column>
            <el-table-column prop='SAMPLFLAG' label='抽样方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='SAMPLER' label='抽样人员' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHNO' label='采集批次号' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHDATE' label='采集日期' width="100" align="center"></el-table-column>
            <el-table-column prop='COLLECTSERNO' label='采集流水号' width="100" align="center"></el-table-column>
            <el-table-column prop='CHANNELTYPE' label='渠道类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='TASKDATE' label='任务分配日期' align="center"></el-table-column>             
            <el-table-column prop='TASKBEGINDATE' label='任务规定开始日期' align="center"></el-table-column> 
            <el-table-column prop='TASKENDDATE' label='任务规定结束日期' align="center"></el-table-column> 
            <el-table-column prop='TASKSTATUS' label='任务状态' align="center" :formatter="dataFormat"></el-table-column>            
            <el-table-column prop='TASKFLAG' label='任务方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='QUALITER' label='质检员' align="center" width="120"></el-table-column>
            <el-table-column prop='QUALITDATE' label='质检日期' align="center" width="120"></el-table-column>
            <el-table-column prop='SCORE' label='得分' align="center" width="120"></el-table-column>
            <el-table-column prop='APPEALFLAG' label='申诉标识' align="center" width="120" :formatter="dataFormat"></el-table-column>
        <!-- <el-table-column prop="TASKID" align="center" label="任务ID"></el-table-column>
        <el-table-column prop="OPERAWORKDATE" align="center" label="操作日期"></el-table-column>
        <el-table-column prop="BATCHNO" align="center" label="批次号"></el-table-column>
        <el-table-column prop="BATCHDATE" align="center" label="批次日期"></el-table-column>
        <el-table-column prop="BEGINTIME" align="center" label="会话开始时间"></el-table-column>
        <el-table-column prop="ENDTIME" align="center" label="会话结束时间"></el-table-column>
        <el-table-column prop="SESSIONTIME" align="center" label="会话时长"></el-table-column>
        <el-table-column prop="CHANNELTYPE" align="center" label="渠道" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="BUSINESSTYPE" align="center" label="业务类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="MEDIATYPE" align="center" label="多媒体类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="CUSTOMER" align="center" label="客户姓名"></el-table-column>
        <el-table-column prop="CUSTOMLEVEL" align="center" label="客户等级" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="TELNUMBER" align="center" label="客户手机号"></el-table-column>
        <el-table-column prop="CUSTOMIDTYPE" align="center" label="客户证件类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="CUSTOMIDNO" align="center" label="客户证件号"></el-table-column>
        <el-table-column prop="CALLTYPE" align="center" label="呼叫类型" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="AREA" align="center" label="运营地区"></el-table-column>
        <el-table-column prop="AGENTID" align="center" label="坐席工号"></el-table-column>
        <el-table-column prop="AGENTNAME" align="center" label="坐席名"></el-table-column>
        <el-table-column prop="AGENTLEVEL" align="center" label="坐席等级" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="EXTNO" align="center" label="分机号"></el-table-column>
        <el-table-column prop="TEAM" align="center" label="班组"></el-table-column>
        <el-table-column prop="SKILL" align="center" label="技能"></el-table-column>
        <el-table-column prop="BRNO" align="center" label="机构"></el-table-column>
        <el-table-column prop="COLLECTFLAG" align="center" label="采集方式" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="VALIDFLAG" align="center" label="有效标识" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="FILEPATH" align="center" label="音视频文件路径"></el-table-column>
        <el-table-column prop="SAMPLFLAG" align="center" label="抽样方式" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="SAMPLER" align="center" label="抽样人员"></el-table-column>
        <el-table-column prop="QUALITER" align="center" label="质检员"></el-table-column>
        <el-table-column prop="TASKFLAG" align="center" label="任务方式" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="TASKSTATUS" align="center" label="任务状态" :formatter="dataFormat"></el-table-column> -->
      </el-table>
      <el-row>
        <el-col>
          <el-pagination
            style="text-align: right; margin-top:20px;"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            @size-change="handleInSizeChange"
            @current-change="handleInCurrentChange"
            :current-page="currpage"
            background
            layout="total,sizes, prev, pager, next, jumper"
            :total="tableTotal"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <component :is="dialogList.detailDialog" :option="detailOptions"></component>
  </div>
</template>
<script>
import queyData from "@/message/QCManage/QCSummary/qcInfoQuery";
import request from "@/common/utils/requestQC";
import getGlobalParams from "@/common/utils/getGlobalParams";
import requestWFM from "@/common/utils/requestWFM";
import dictionary from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
import detailDialog from "./detailDialog2";


export default {
  props: {
    form: Object
  },
  data() {
    return {
      dialogList: {
          detailDialog,
        },
        detailOptions: {
          isShow: false,
          title: "",
          row: {}
        },
        currentRow: [],
      tableData: [],
      tableTotal: 1,
      pageSize: getGlobalParams.get("PageSize"),
      currpage: 1,
      channelOption: [], //渠道类型
      typeOption: []
    };
  },
  mounted() {
    this.dictionaryQuery("CHANNELTYPE").then(value => (this.channelOption = value));
    this.dictionaryQuery("BUSITYPE").then(value => (this.typeOption = value));
    this.QCInfoQuery();
  },
  methods: {
    async dictionaryQuery(type) {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = type
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 400
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          return response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
    async QCInfoQuery() {
      let resBody = new queyData();
      resBody.data.BEGINDATE = this.form.startDate;
      resBody.data.ENDDATE = this.form.endDate;
      resBody.data.AGENTID = this.form.agentId;
      resBody.data.OPERAFLAG = '1';
      resBody.data.PageFlag = 4;
      resBody.data.CurrPage = 1;
      resBody.data.PageRowNum = 10;
      // console.log('待质检=='+JSON.stringify(resBody.data))
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        console.log("待质检查询成功========")
        this.tableData = response.BODY.RSPSTRUCT;
        this.tableTotal = this.tableData.TotalRowNum;
        this.currpage = this.tableData.NowPageNum;
      } else {
        this.$message({
          type: "error",
          message:
            "请求失败，错误码:" +
            response.SYS_HEAD.ReturnCode +
            "，错误信息：" +
            response.SYS_HEAD.ReturnMessage
        });
      }
    },
    //前端分页
    handleInCurrentChange(val) {
      this.currpage = val;
      // console.log(`当前页: ${val}`);
      this.QCInfoQuery();
    },
    handleInSizeChange(val) {
      this.pageSize = val;
      this.QCInfoQuery();
    },
    dataFormat(row, column) {
        //格式化表格
        if (column.property == "CUSTOMLEVEL")
          // 001-非VIP 002-VIP黄金级 003-VIP铂金级 004-VIP钻石级
          return row[column.property]=='001'?'非VIP':row[column.property]=='002'?'VIP黄金级':row[column.property]=='003'?'VIP铂金级':row[column.property]=='004'?'VIP钻石级':row[column.property];
        
        if (column.property == "CUSTOMIDTYPE")
          // 001-身份证 002-军官证 003-其他
          return row[column.property]=='001'?'身份证':row[column.property]=='002'?'军官证':row[column.property]=='003'?'其他':row[column.property];
        
        if (column.property == "CALLTYPE")
          // 0-呼出 1-呼入
          return row[column.property]=='0'?'呼出':row[column.property]=='1'?'呼入':row[column.property];
        
        if (column.property == "AGENTLEVEL")
          // 001-一星 002-二星 003-三星 004-四星 005-五星
          return row[column.property]=='001'?'一星':row[column.property]=='002'?'二星':row[column.property]=='003'?'三星':row[column.property]=='004'?'四星':row[column.property]=='005'?'五星':row[column.property];
        
        if (column.property == "MEDIATYPE")
          // voice-电话 video-视频 chat-文字
          return row[column.property]=='voice'?'电话':row[column.property]=='video'?'视频':row[column.property]=='chat'?'文字':row[column.property];
        
        if (column.property == "CHANNELTYPE")
          // C001-电话  C002-微信  C003-PAD
          return row[column.property]=='C001'?'电话':row[column.property]=='C002'?'微信':row[column.property]=='C003'?'PAD':row[column.property];

        if (column.property == "BUSINESSTYPE")
          // 0-账务类 1-签约类 2-信息维护类 3-账户类 4-理财类，多个业务类型用“|”分隔
          return row[column.property]=='0'?'账务类':row[column.property]=='1'?'签约类':row[column.property]=='2'?'信息维护类':row[column.property]=='3'?'账户类':row[column.property]=='4'?'理财类':row[column.property];
        
        if (column.property == "SAMPLFLAG"||column.property == "COLLECTFLAG" || column.property == "TASKFLAG")
          // 0-自动 1-手动
          return row[column.property]=='0'?'自动':row[column.property]=='1'?'手动':row[column.property];
        
        if (column.property == "TASKSTATUS")
          // 0-未开始 1-已完成 2-处理中 3-废弃 4-未分配
          return row[column.property]=='0'?'未开始':row[column.property]=='1'?'已完成':row[column.property]=='2'?'处理中':row[column.property]=='3'?'废弃':row[column.property]=='4'?'未分配':row[column.property];
        if (column.property == "APPEALFLAG")
          return row[column.property]=='0'?'否':row[column.property]=='1'?'是':row[column.property]
      },
    findName(arr, val) {
      let data = arr.filter(item => {
        return item.FIELDKEY == val;
      });
      if (data.length) return data[0].FIELDKEY + " - " + data[0].FIELDVALUE;
    },
    detail(){
        this.detailOptions.row = this.currentRow;
        this.detailOptions.title = '待质检详情';
        this.detailOptions.isShow = true;
      },
      handleCurrentChange(val) {
        this.currentRow = val;
        console.log("===="+JSON.stringify(this.currentRow))
      },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>